<template>
    <div>
        <el-row class="app-toptool" type="flex">
            <el-col :span="16">
                <Search size="small" :search-visible="searchVisible" :search-data.sync="searchData"
                    :search-form="searchForm" @refesh_list="searchgo" />
            </el-col>
        </el-row>
        <div>
            <el-table ref="multipleTable" v-loading="loading" :row-class-name="rowClass" row-key="id"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :border="false" :stripe="true"
                class="eltable" :data="list" style="width: 100%" @selection-change="selection">
                <el-table-column type="" property="nickname" label="用户昵称" show-overflow-tooltip />
                <el-table-column label="用户头像">
                    <template slot-scope="scope">
                        <el-image class="table_list_pic" :src="scope.row.userpic || require('@/assets/no_touxiang.png')"
                            :preview-src-list="[scope.row.userpic || require('@/assets/no_touxiang.png')]" />
                    </template>
                </el-table-column>
                <el-table-column type="" property="title" label="拉新师傅" show-overflow-tooltip />
                <el-table-column type="" property="invitetime" label="邀请时间" />
            </el-table>
            <Pagination :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit"
                @pagination="index" />
        </div>
    </div>
</template>
<script>
import Search from '@/components/common/Search'
import Pagination from '@/components/Pagination'
import Update from '@/views/diyfields/update.vue'
import ImportData from '@/views/diyfields/importData.vue'
import {
    confirm,
    param2Obj
} from '@/utils/common'
import XLSX from 'xlsx'
export default {
    name: 'TechnicalIndex',
    components: {
        Search,
        Pagination,
        Update,
        ImportData
    },
    data() {
        return {
            dialog: {
                updateDialogStatus: false,
                importDataDialogStatus: false
            },
            ids: [],
            single: true,
            multiple: true,

            list: [],
            RegisterField: [],
            opentype: 'add',
            updateInfo: {},
            loading: false,
            dumpshow: false,
            exceldata: [],
            dumppage: 1,
            percentage: 0,
            ws: {},
            filename: '',
            page_data: {
                limit: 20,
                page: 1,
                total: 20
            },
            searchVisible: true,
            searchForm: [{
                type: 'Input',
                label: '关键词',
                prop: 'keyword',
                width: '230px'
            }],
            searchData: {}
        }
    },

    mounted() {
        this.index()
        console.log('---')
    },
    methods: {
        searchgo() {
            this.page_data.page = 1
            this.index()
        },
        index() {
            const param = {
                path: this.$route.path,
                limit: this.page_data.limit,
                page: this.page_data.page
            }
            Object.assign(param, this.searchData)
            Object.assign(param, param2Obj(this.$route.fullPath))
            this.loading = true

            this.$api.post('/Technical/invite', param).then(res => {
                this.list = res.data.data
                this.page_data.total = res.data.total
                this.loading = false
                if (this.page_data.page == 1) {
                }
            })
        },
        selection(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        rowClass({
            row,
            rowIndex
        }) {
            for (let i = 0; i < this.ids.length; i++) {
                if (row.id === this.ids[i]) {
                    return 'rowLight'
                }
            }
        }
    }
}
</script>
<style scoped>
.table_list_pic {
    width: 60px;
    vertical-align: middle;
}
</style>